<template>
  <div class="app_box login_view">
    <div class="form_box">
      <h2 class="form_title">后台管理</h2>
      <FormComp :formConfig="formConfig" @handleSure="handleSure" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import FormComp from "@/components/FormComp.vue";
import { loginFormInt } from "@/api/login/type";
import { loginApi } from "@/api/login";
// 获取仓库
import loginStore from "@/store/modules/login";
// 仓库实例化
const loginSt = loginStore();

/**
 * 登录表单
 */
const formConfig = reactive({
  items: [
    {
      label: "用户名",
      prop: "username",
      type: "Text",
      placeholder: "请输入用户名",
    },
    {
      label: "密码",
      prop: "password",
      type: "Password",
      placeholder: "请输入密码",
    },
  ],
  rules: {
    username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  },
  btnList: [
    {
      label: "登录",
      type: "primary",
      prop: "sure",
    },
    {
      label: "取消",
      prop: "cancel",
    },
  ],
});

const router = useRouter();

/**
 * 确定
 */
const handleSure = (val: loginFormInt) => {
  loginApi(val).then((res) => {
    // console.log("res", res);
    if (res.code == 0) {
      const userInfo = {
        token: res.data,
        username: val.username, // 获取菜单使用
      };
      sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
      loginSt.login(userInfo)
      ElMessage.success("登录成功");
      router.push("/home");
    } else {
      ElMessage.info(res.msg);
    }
  });
};
</script>

<style scoped lang="scss">
.login_view {
  background-color: #485d9a;
  position: relative;
  .form_box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -100px;
    background-color: #fff;
    width: 500px;
    padding: 30px;
    border-radius: 10px;
    .form_title {
      text-align: center;
      margin-bottom: 30px;
    }
  }
}
</style>
